<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>有仓分享未加盟</title>
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <!--标准mui.css-->
    <link rel="stylesheet" href="../css/mui.min.css">
    <link rel="stylesheet" type="text/css" href="../css/app.css" />
    <!--App自定义的css-->
    <style>
        .mui-input-row:after {
            position: absolute;
            right: 0;
            bottom: 0;
            left: 0px;
            height: 1px;
            content: '';
            -webkit-transform: scaleY(.5);
            transform: scaleY(.5);
            background-color: #efefef;
        }
        .mui-content>div:nth-child(1){
            background: url("../images/weijiameng/people.png") no-repeat 1rem center;
            background-size: 2rem;
            padding-left: 1rem;
        }
        .mui-content>div:nth-child(2){
            background: url("../images/weijiameng/phone.png") no-repeat 1rem center;
            background-size: 2rem;
            padding-left: 1rem;
        }
        .mui-content>div:nth-child(3){
            background: url("../images/weijiameng/gudingPhone.png") no-repeat 1rem center;
            background-size: 2rem;
            padding-left: 1rem;
        }
        .mui-content>div:nth-child(4){
            background: url("../images/weijiameng/id.png") no-repeat 1rem center;
            background-size: 2rem;
            padding-left: 1rem;
        }
        .mui-content>div:nth-child(5){
            background: url("../images/weijiameng/updateId.png") no-repeat 1rem center;
            background-size: 2rem;
            padding-left: 1rem;
        }
        .imgWrap{
            width: 75%; margin: 1rem auto;
            position: relative;
            height: 12rem;
        }
        .imgWrap img{
            width: 100%;
            height: 12rem;
        }
        .switchBtn{
            background: url("../images/weijiameng/switch.png") no-repeat center;
            background-size: 1rem;
        }
        .switchBtnAfter{
            background: url("../images/weijiameng/switchBtnAfter.png") no-repeat center;
            background-size: 1rem;
        }
        /*存图片的盒子*/
        .img-div{
            border: 1px solid #ddd;
            float: left;
            line-height: 1;
            margin-left: 5px;
            overflow: hidden;
        }
        .hide{display: none}
    </style>
    <script type="text/javascript" src="../js/jquery-3.2.1.min.js"></script>
</head>

<body>
<header class="mui-bar mui-bar-nav">
    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
    <h1 class="mui-title">申请加盟</h1>
    <span style="float: right;line-height: 3rem">我的仓</span>
</header>
<div class="mui-content">
    <div  class="mui-control-content mui-active">
        <div class="mui-input-row h50 pr">
            <i class="mui-icon-cang mui-cangchutype   mui-pull-left"></i>
            <label class="pl40">联系人</label>
            <input maxlength="10" style="width: 55%;float: right;height: 3rem;text-align: right" type="text" class="mui-input-clear" placeholder="请输入联系人">
        </div>
    </div>
    <div  class="mui-control-content mui-active">
        <div class="mui-input-row h50 pr">
            <i class="mui-icon-cang mui-cangchutype   mui-pull-left"></i>
            <label class="pl40">联系电话</label>
            <input pattern="[0-9]*" maxlength="11" style="width: 55%;float: right;height: 3rem;text-align: right" type="text" class="mui-input-clear" placeholder="请输入联系电话">
        </div>
    </div>
    <div  class="mui-control-content mui-active">
        <div class="mui-input-row h50 pr">
            <i class="mui-icon-cang mui-cangchutype   mui-pull-left"></i>
            <label class="pl40">固定电话</label>
            <input pattern="[0-9]*" maxlength="11" style="width: 55%;float: right;height: 3rem;text-align: right" type="text" class="mui-input-clear" placeholder="请输入固定电话">
        </div>
    </div>
    <div  class="mui-control-content mui-active">
        <div class="mui-input-row h50 pr">
            <i class="mui-icon-cang mui-cangchutype   mui-pull-left"></i>
            <label class="pl40">身份证号</label>
            <input pattern="[0-9]*" maxlength="18" style="width: 55%;float: right;height: 3rem;text-align: right" type="text" class="mui-input-clear" placeholder="请输入身份证号">
        </div>
    </div>
    <div  class="mui-control-content mui-active">
        <div class="mui-input-row h50 pr">
            <i class="mui-icon-cang mui-cangchutype   mui-pull-left"></i>
            <label class="pl40">上传身份证照片</label>
        </div>
    </div>
    <!--身份证正面-->
    <div class="imgWrap">
        <div class="img-box" id="imgboxid"></div>
        <img id="imgBtn" style="position: absolute;width: 100%;height: 12rem;top:0;left: 0;" src="../images/weijiameng/facadeOfIDCard.png"/>
        <input style="position: absolute;width: 100%;height: 12rem;top:0;left: 0;z-index: 100;opacity: 0" type="file"  multiple="multiple"  name="fileAttach[]" onchange="xmTanUploadImg(this)"/>
    </div>

    <!--身份证反面-->
    <div class="imgWrap">
        <div class="img-box" id="imgboxidf"></div>
        <img id="imgBtnf" style="position: absolute;width: 100%;height: 12rem;top:0;left: 0;" src="../images/weijiameng/identityCard.png"/>
        <input style="position: absolute;width: 100%;height: 12rem;top:0;left: 0;z-index: 100;opacity: 0" type="file"  multiple="multiple"  name="fileAttach[]" onchange="xmTanUploadImgf(this)"/>
    </div>
    <!--手持身份证-->
    <div class="imgWrap">
        <div class="img-box" id="imgboxidc"></div>
        <img id="imgBtnc" style="position: absolute;width: 100%;height: 12rem;top:0;left: 0;" src="../images/weijiameng/handheldIdentityCard.png"/>
        <input style="position: absolute;width: 100%;height: 12rem;top:0;left: 0;z-index: 100;opacity: 0" type="file"  multiple="multiple"  name="fileAttach[]" onchange="xmTanUploadImgc(this)"/>
    </div>

    <div class="imgWrap" style="height: auto">
        <span class="switchBtn" style="float: left;width: 1rem;height: 1rem;" ></span>
        <p style="float: left;margin-left: 1rem">您已同意<span style="color: #2e97f5">《百福云仓加盟协议》</span></p>
    </div>
    <div class="imgWrap" style="margin:4rem auto">
       <button style="width: 100%; height: 3rem;background: #ffbf33; border-radius: 1.5rem;color: #ffffff">确认加盟</button>
    </div>
</div>
<nav class="mui-bar mui-bar-tab">
    <a class="mui-tab-item mui-active" href="#tabbar">
        <span class="mui-icon mui-icon-home"></span>
        <span class="mui-tab-label">首页</span>
    </a>
    <a class="mui-tab-item" href="#tabbar-with-chat">
        <span class="mui-icon mui-icon-compose"></span>
        <span class="mui-tab-label">统计</span>
    </a>
    <a class="mui-tab-item" href="#tabbar-with-contact">
        <span class="mui-icon mui-icon-contact"></span>
        <span class="mui-tab-label">我的</span>
    </a>

</nav>
</body>
<script src="../js/mui.min.js"></script>
<script>
//    $(function(){
        $(".switchBtn").click(function(){    //点击同意协议切换
            $(".switchBtn").toggleClass("switchBtnAfter")
        });
        //选择图片，马上预览
        function xmTanUploadImg(obj) {

            var fl=obj.files.length;
            for(var i=0;i<fl;i++){
                var file=obj.files[i];
                var reader = new FileReader();

                //读取文件过程方法

                reader.onloadstart = function (e) {
                    console.log("开始读取....");
                }
                reader.onprogress = function (e) {
                    console.log("正在读取中....");
                }
                reader.onabort = function (e) {
                    console.log("中断读取....");
                }
                reader.onerror = function (e) {
                    console.log("读取异常....");
                }
                reader.onload = function (e) {
                    console.log("成功读取....");

                    var imgstr='<img style="max-width:17rem;height:12rem;margin-left: 2px" src="'+e.target.result+'"/>';
                    var oimgbox=document.getElementById("imgboxid");
                    var ndiv=document.createElement("div");
                    var oImgBtn = document.getElementById("imgBtn");   //点击的图片

                    ndiv.innerHTML=imgstr;
                    ndiv.className="img-div";
                    oimgbox.innerHTML = "";   //每次向图片盒子里面加内容时把图片盒子清空
                    oimgbox.appendChild(ndiv);
                    oImgBtn.setAttribute("class", "hide");

                }

                reader.readAsDataURL(file);
            }

        };
function xmTanUploadImgf(obj) {

    var fl=obj.files.length;
    for(var i=0;i<fl;i++){
        var file=obj.files[i];
        var reader = new FileReader();

        //读取文件过程方法

        reader.onloadstart = function (e) {
            console.log("开始读取....");
        }
        reader.onprogress = function (e) {
            console.log("正在读取中....");
        }
        reader.onabort = function (e) {
            console.log("中断读取....");
        }
        reader.onerror = function (e) {
            console.log("读取异常....");
        }
        reader.onload = function (e) {
            console.log("成功读取....");

            var imgstr='<img style="max-width:17rem;height:12rem;margin-left: 2px" src="'+e.target.result+'"/>';
            var oimgbox=document.getElementById("imgboxidf");
            var ndiv=document.createElement("div");
            var oImgBtn = document.getElementById("imgBtnf");   //点击的图片

            ndiv.innerHTML=imgstr;
            ndiv.className="img-div";
            oimgbox.innerHTML = "";   //每次向图片盒子里面加内容时把图片盒子清空
            oimgbox.appendChild(ndiv);
            oImgBtn.setAttribute("class", "hide");

        }

        reader.readAsDataURL(file);
    }

};
function xmTanUploadImgc(obj) {

    var fl=obj.files.length;
    for(var i=0;i<fl;i++){
        var file=obj.files[i];
        var reader = new FileReader();

        //读取文件过程方法

        reader.onloadstart = function (e) {
            console.log("开始读取....");
        }
        reader.onprogress = function (e) {
            console.log("正在读取中....");
        }
        reader.onabort = function (e) {
            console.log("中断读取....");
        }
        reader.onerror = function (e) {
            console.log("读取异常....");
        }
        reader.onload = function (e) {
            console.log("成功读取....");

            var imgstr='<img style="max-width:17rem;height:12rem;margin-left: 2px" src="'+e.target.result+'"/>';
            var oimgbox=document.getElementById("imgboxidc");
            var ndiv=document.createElement("div");
            var oImgBtn = document.getElementById("imgBtnc");   //点击的图片

            ndiv.innerHTML=imgstr;
            ndiv.className="img-div";
            oimgbox.innerHTML = "";   //每次向图片盒子里面加内容时把图片盒子清空
            oimgbox.appendChild(ndiv);
            oImgBtn.setAttribute("class", "hide");

        }

        reader.readAsDataURL(file);
    }

}
//    })
</script>
</html>